<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>文章管理</BreadcrumbItem>
      <BreadcrumbItem>文章类型列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        文章类型:
        <Input v-model="articalName" style="width: 120px"/>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="addArticle" style="margin-right: 10px">添加</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" style="margin-right: 10px">搜索</Button>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="data">
        <template slot-scope="{row}" slot="status">
          <span>{{ checkCategoryStatus(row.status) }}</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="editCategory(row)"
            v-hasPermission="['38']"
          >编辑
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="delCategory(row)"
            v-hasPermission="['38']"
          >删除
          </Button>
          <Button
            v-show="row.status==='1'"
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="disableCategory(row)"
            v-hasPermission="['38']"
          >禁用
          </Button>
          <Button
            v-show="row.status==='2'"
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="disableCategory(row)"
            v-hasPermission="['38']"
          >启用
          </Button>
        </template>
      </Table>
    </div>
    <!--    分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="10"
            :page-size-opts="[10,20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>
    <!--  添加弹窗  -->
    <Modal v-model="modal3"
           :footer-hide="true"
           :mask-closable="false"
           width="600">
      <Form :label-width="80">
        <div><h4>添加类型</h4></div>
        <FormItem>
          类型名称:
          <Input
            v-model="modalArticalName"
            clearable
            style="width: 120px;"/>
        </FormItem>
        <FormItem>
          是否启用:
          <RadioGroup v-model="modalAtricalStatus">
            <Radio label="1">是</Radio>
            <Radio label="2">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <Button @click="categoryAdd" type="primary">确定</Button>
          <Button style="margin-left: 15px" @click="modal3=false">取消</Button>
        </FormItem>
      </Form>
    </Modal>
    <!--  编辑弹窗  -->
    <Modal v-model="modal4"
           :footer-hide="true"
           :mask-closable="false"
           width="600">
      <Form :label-width="80">
        <div><h4>编辑类型</h4></div>
        <FormItem>
          类型名称:
          <Input
            v-model="editArticalName"
            clearable
            style="width: 120px;"/>
        </FormItem>
        <FormItem>
          是否启用:
          <RadioGroup v-model="editAtricalStatus">
            <Radio label="1">是</Radio>
            <Radio label="2">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <Button @click="categoryEdit" type="primary">确定</Button>
          <Button style="margin-left: 15px" @click="modal4=false">取消</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // ------------------ 添加文章分类 ----------------------
      articalName: '',
      articalStatus: 1,
      // ----------------- 弹窗数据 -------------------
      modalArticalName: '',
      modalAtricalStatus: '1',
      modal3: false,
      modal4: false,
      editArticalName: '',
      editAtricalStatus: '1',
      editArticalId: '',
      // ------------------- 分页 ----------------------
      page: {
        page: 1,
        limit: 10,
        count: 0
      },
      // ----------------------------------
      formItem: {
        radio: 'ok'
      },
      params: {
        device_time: [],
        status: 1,
        user_id: '',
        order_id: '',
        activity_id: '',
        page: 1,
        limit: 10
      },
      total: 0,
      height: this.$store.state.height,
      request: {
        device_number: '',
        page: 1
      },
      columns1: [
        {
          title: '文章类型',
          key: 'name',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '文章状态',
          key: 'article_status',
          minWidth: 150,
          align: 'center',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'option',
          minWidth: 300,
          align: 'center'
        }
      ],
      data: [
        {
          article_types: '001',
          article_status: '借阅中'
        },
        {
          article_types: '002',
          article_status: '借阅结束'
        }
      ],
      role_id: null
    }
  },
  mounted () {
    this.init()
    this.categoryList()
    // const a = this.astgo.getItem('ys_prj_info_role')
  },
  methods: {
    /**
     * 文章类型状态 1-启用 2-禁用
     * @param val
     * @returns {string}
     */
    checkCategoryStatus (val) {
      switch (val) {
        case '1':
          return '启用'
        case '2':
          return '禁用'
      }
    },
    /**
     * 文章类型编辑
     * @param row
     */
    editCategory (row) {
      console.log(row)
      this.editArticalName = row.name
      this.editAtricalStatus = row.status
      this.editArticalId = row.id
      this.modal4 = true
    },
    /**
     * 分页大小改变
     * @param val
     */
    handleSizeChange (val) {
      this.page.limit = val
      this.categoryList()
    },
    /**
     * 翻页
     * @param val
     */
    handleCurrentChange (val) {
      this.page.page = val
      this.categoryList()
    },
    // ------------------- axios -----------------------
    /**
     * 添加文章分类
     */
    categoryAdd () {
      const pd = {
        name: this.modalArticalName,
        status: this.modalAtricalStatus
      }
      this.axios.post('article/categoryAdd', pd)
        .then(res => {
          this.$Message.success(res.msg)
          this.categoryList()
          // this.modal3 = false
        })
    },
    /**
     * 分类列表
     */
    categoryList () {
      const pd = {
        page: this.page.page,
        limit: this.page.limit
      }
      this.axios.get('article/categoryList', { params: pd })
        .then(res => {
          this.data = res.data.list
          this.page.count = res.data.count
        })
    },
    /**
     * 修改类型
     */
    categoryEdit () {
      const pd = {
        id: this.editArticalId,
        name: this.editArticalName,
        status: this.editAtricalStatus
      }
      this.axios.post('article/categoryEdit', pd)
        .then(res => {
          this.$Message.success(res.msg)
          this.categoryList()
          this.modal4 = false
        })
    },
    /**
     * 添加文章类型
     */
    addArticle () {
      this.cancel()
      this.modal3 = true
      this.allocated = []
      this.undistributed = []
      const pd = {
        name: this.articalName,
        status: this.articalStatus
      }
      if (this.infoID === 6) {
        this.axios.post('article/categoryAdd', pd).then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated
            this.undistributed = res.data.undistributed
          }
        })
      }
    },
    /**
     * 禁用或启用该类型 1- 启用 2 - 禁用
     * @param row
     */
    disableCategory (row) {
      const pd = {
        id: row.id,
        status: row.status === '1' ? '2' : '1'
      }
      this.axios.post('article/categoryStatus', pd)
        .then(res => {
          this.$Message.success(res.msg)
          this.categoryList()
        })
    },
    /**
     * 删除类型
     * @param row
     */
    delCategory (row) {
      const pd = {
        id: row.id
      }
      this.axios.post('article/categoryDel', pd)
        .then(res => {
          this.$Message.info(res.msg)
          this.categoryList()
        })
    },
    init () {
      this.axios.post('order/order_list', this.params).then((res) => {
        console.log('this.params: ', this.params)
        if (res.code === 1) {
          console.log(res)
          this.total = res.data.count
          this.tableData = res.data.list
        }
      })
    },
    confirm () {
      this.modal1 = false
      this.$Message.success('保存成功！')
      this.cancel()
    },
    cancel () {
    },
    setStatus (id, status) {
      var text = '确定要' + (status === 1 ? '启用' : '禁用') + '此机器组么？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success('操作成功')
        },
        onCancel: () => {
        }
      })
    },
    lists () {
    },
    timechange (val) {
      console.log(val)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.door_device {
  position: relative;
  top: -20px;
}

.vertical {
  font-size: 16px;

}
</style>
